<style lang="scss" scoped>
    .mshop-order {
        padding-top: 46px;
        background-color: white;

        .address {
            $iconSize: 20px;
            display: flex;
            align-items: center;

            .icon {
                padding: .75em;
                .address {
                    display: block;
                    width: $iconSize;
                    height: $iconSize;
                    background: url('../../assets/address.svg') no-repeat;
                    background-size: $iconSize;
                }
            }

            .address-info {
                width: 100%;
                padding: .5em .75em .5em 0;
                line-height: 1.7;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info {
                    width: 100%;
                    .name {
                        display: flex;
                        justify-content: space-between;
                    }

                    .street {
                        word-break: break-all;
                        font-size: 14px;
                    }
                }
            }

            &:active {
                background-color: #ececec;
            }
        }

        .order {
            width: 100%;

            @mixin price {
                color: #F44336;

                &::before {
                    content: '￥';
                    position: relative;
                    top: 1.4px;
                }
            }

            .line {
                padding: .4em 0;
                display: flex;
                justify-content: space-between;
                width: 100%;

                align-items: center;
                width: 100%;
                background-color: #F4EFEF;
                font-size: 14px;

                &:not(:last-child) {
                    border-bottom: 2px solid white;
                }

                .left {
                    width: 80%; // 为了兼容微信space-bettwen显示bug，强制指定宽度
                    padding-left: .8em;
                    display: flex;
                    justify-content: flex-start;

                    .img {
                        border: 2px solid #ddd;
                        background-color: #fff;
                        border-radius: 4px;
                        height: 88px;
                        min-width: 88px;
                        max-width: 88px;
                        display: flex;
                        align-items: center;

                        img {
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }

                    .info {
                        padding: 0 1em;
                        word-break: break-all;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .variant {
                            color: #888;
                        }
                    }
                }

                .right {
                    padding-right: .8em;
                    height: 100%;

                    .number {
                        padding: 0 .5em;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 100%;

                        .price {
                            flex-basis: 2em;
                            @include price;
                        }

                        .quantity {
                            flex-basis: 2em;

                            &::before {
                                content: 'x';
                                padding-right: 2px;
                                position: relative;
                                bottom: 1px;
                            }
                        }
                    }
                }
            }
        }

        .amount-subtotal {
            padding: 10px 0;

            > div {
                padding: 4px 10px;
            }

            .price {
                color: red;

                &::before {
                    content: '￥';
                    position: relative;
                    top: 1.1px;
                }
            }

            .flex-space {
                display: flex;
                justify-content: space-between;

                > span {
                    display: block;
                }
            }

            .flex-end {
                display: flex;;
                justify-content: flex-end;

                > span {
                    display: block;
                }
            }

            .tax {
                font-size: 14px;
            }

            .real_amount {
                border-top: 1px solid #efefef;
                padding-top: 10px
            }

            .create_date {
                font-size: 14px;
                color: #666;
            }
        }

        .message-info {
            border-top: 1em solid #efefef;

            .message {
                border-top: 1px solid #efefef;
                padding: 10px 15px;

                > span {
                    display: block;
                }

                .header {
                    font-size: 14px;
                    color: #666;
                }

                .content {
                    word-break: break-all;
                }
            }
        }
    }
</style>

<template>
    <div class="mshop-order">
        <big-message v-if="shop_type.type === 'integral'" message="兑换成功"></big-message>
        <div class="address">
            <div class="icon">
                <i class="address"></i>
            </div>

            <div class="address-info">
                <div class="info">
                    <div class="name">
                        <span>收货人:{{ address.name }}</span>
                        <span>{{ address.phone }}</span>
                    </div>

                    <div class="street">
                        <span>收货地址:</span>
                        <span>{{ address.province && address.province.name }}</span>
                        <span>{{ address.city && address.city.name }}</span>
                        <span>{{ address.county && address.county.name }}</span>
                        <span>{{ address.street }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="order">
            <div class="line" v-for="line in order_line">
                <div class="left">
                    <div class="img" >
                        <img :src="line.product_img" />
                    </div>

                    <div class="info">
                        <p class="title">{{ line.name }}</p>
                        <p class="variant">{{ line.variant }}</p>
                    </div>
                </div>

                <div class="right">
                    <div class="number">
                        <price :ratio="redeem_ratio" :price="line.price_unit"></price>
                        <p class="quantity">{{ line.product_uom_qty }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="amount-subtotal">
            <div class="flex-space amount">
                <span>商品总额</span>
                <price :ratio="redeem_ratio" :price="amount_untax"></price>
            </div>

            <div class="flex-space tax" v-if="amount_tax">
                <span>含税</span>
                <price :ratio="redeem_ratio" :price="amount_tax"></price>
            </div>

            <div class="flex-end real_amount">
                <span>总价格:</span>
                <price :ratio="redeem_ratio" :price="amount"></price>
            </div>

            <div class="flex-end create_date">
                <span>下单时间:</span>
                <span>{{ create_date }}</span>
            </div>
        </div>

        <div class="message-info">
            <group>
                <cell title="配送时间" :value="shipping_date"></cell>
                <div class="message" v-if="message">
                    <span class="header">买家留言:</span>
                    <span class="content">{{ message }}</span>
                </div>
            </group>
        </div>
    </div>
</template>

<script>
    import orderService from 'services/order'
    import Group from 'vux-components/group'
    import Cell from 'vux-components/cell'
    import XTextarea from 'vux-components/x-textarea'
    import Calendar from 'vux-components/calendar'
    import Toast from 'vux-components/toast'
    import Price from 'util-components/price.vue'
    import BigMessage from 'util-components/big-message.vue'

    import getters from '../../vuex/getters'

    const temp_data = {
        order_line: [
            { product_img: '/static/4.jpeg', name: '守望先锋XXX', variant: '版本：普通', price_unit: 198, product_uom_qty: 12},
            { product_img: '/static/4.jpeg', name: '守望先锋XXX', variant: '版本：普通', price_unit: 198, product_uom_qty: 12}
        ],
        address: {
            name: '朱正翔',
            phone: 18801613460,
            street: '上海市海鹏路301弄36号103室'
        },
        amount_tax: 100,
        amount: 4852,
        create_date: '2016-7-19 19:23:23',
        shipping_date: '2016-7-30',
        message: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    }

    export default {
        data: () => ({
            address: false,
            order_line: [],
            shipping_date: '',
            message: '',
            amount_tax: 0,
            create_date: '',
            amount: 0,
            redeem_ratio: 0,
        }),
        vuex: {
            getters,
        },
        components: {
            Group,
            Cell,
            XTextarea,
            Calendar,
            Toast,
            Price,
            BigMessage
        },
        computed: {
            amount_untax () {
                return this.order_line.reduce((sum, line) =>
                    sum += line.price_unit * line.product_uom_qty, 0);
            }
        },
        route: {
            data: ({to}) => {
                return orderService
                    .fetch(to.query.order_id)
                    .then(({data}) => data, () => temp_data);
            }
        }
    }
</script>
